<template>
   <div class="login">
    <div class="title">登陆页</div>
    <div class="block">
      <input type="text" v-model="formData.phone" placeholder="输入手机号">
    </div>
    <div class="block">
      <input type="password" v-model="formData.pass" placeholder="输入密码">
    </div>
    <div class="block">
      <input type="button" value="登陆" @click="login">
      <input class="registered" type="button" value="注册" @click="$router.push('/registered')">
    </div>
  </div>
</template>


<script>
import { user_login } from '../utils/api'
import { Toast } from 'vant';
export default {
  
  data() {
    return {
      formData: {
        phone: '',
        pass:''
      }
    };
  },
  methods: {
    login() {
      if (/^1[3-9]\d{9}$/.test(this.formData.phone) == false) {
        Toast('请输入合法的手机号');
      } else if (!this.formData.pass) {
        Toast('请输入手机号');
      } else {
        user_login(this.formData).then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            localStorage.setItem('token', res.data.token);
            localStorage.setItem('userinfo', JSON.stringify(res.data.userinfo));
            this.$router.push('/');
            Toast('登录成功');
            this.$store.dispatch('request_favlist')
          } else {
            Toast('登录失败');
          }
        })
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.login {
  margin: 50px 20px;
}

.login .title {
  font-weight: bold;
  text-align: center;
  line-height: 40px;
}

.login .block {
  margin: 20px 0;
}

.login .block input {
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  outline: none;
  width: 100%;
}
.registered{
  margin-top: 20px;
}
</style>